<template>
  <div class="ticketList-box">
    <div class="ticketList-top-btn">
      <el-button @click="addForu()" style="width:136px" icon="el-icon-plus">创建论坛</el-button>
    </div>
    <el-table empty-text="赶快创建论坛吧~" v-loading="loadingTable" element-loading-text="拼命加载中" :data="$store.state.foruList.bbslist" border style="width: 100%">
      <el-table-column prop="bbsName" align="center" label="论坛名称">
      </el-table-column>
      <el-table-column width="100" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bbsType=='主论坛'" type="success">主论坛</el-tag>
          <el-tag v-if="scope.row.bbsType=='分论坛'">分论坛</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          {{$moment(scope.row.startTime,'YYYY-MM-DD HH:mm')}}
          至
          {{$moment(scope.row.endTime,'YYYY-MM-DD HH:mm')}}
        </template>
      </el-table-column>
      <el-table-column width="100" prop="bbsNum" align="center" label="库存">
      </el-table-column>
      <el-table-column width="100" prop="orderNum" align="center" label="已预订">
      </el-table-column>
      <el-table-column width="160" align="center" label="更新时间">
        <template slot-scope="scope">
          <p>{{$moment(scope.row.updateTime,'YYYY-MM-DD HH:mm')}}</p>
        </template>
      </el-table-column>
      <el-table-column width="136" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="editForu(scope.row)" type="text" style="color:#67c23a">编辑</el-button>
          <el-button @click="delForu(scope.row.bbsId)" type="text" style="color:#f56c6c">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="$store.state.foruList.amount" class="el-pagination-box">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$store.state.foruList.amount">
      </el-pagination>
    </div>
    <!-- 创建论坛or编辑论坛 -->
    <el-dialog :title="isaddForu?'创建论坛':'编辑论坛'" :visible.sync="addForuAlert">
      <el-form :model="ForuForm">
        <el-form-item label-width="100px" label="论坛类型">
          <el-select style="width:100%" v-model="ForuForm.type" filterable placeholder="请选择">
            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="论坛名称">
          <el-input v-model="ForuForm.name" maxlength="30" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="时间">
          <el-date-picker style="width:100%" v-model="foruTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['09:00:00']"> </el-date-picker>
        </el-form-item>
        <el-form-item label-width="100px" label="库存">
          <el-input-number style="width:100%" v-model="ForuForm.stock" :step="100" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addForuAlert = false">取 消</el-button>
        <el-button icon="el-icon-plus" @click="upDataForuForm()" :loading="loadingaddForuAlert" type="primary">{{isaddForu?'创 建':'确 定'}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
export default {
  data() {
    return {
      currentPage: 1, //当前页数
      pageSize: 10, //每页多少条
      isaddForu: true, //是否是添加论坛
      typeList: [
        {
          name: "主论坛"
        },
        {
          name: "分论坛"
        }
      ],
      foruTime: "", //论坛时间
      ForuForm: {
        bbsId: "", //论坛id
        type: "", //
        name: "",
        admissionSatreTime: "",
        admissionEndTime: "",
        stock: 0
      }, //论坛表单
      loadingTable: false, //表格
      loadingaddForuAlert: false,
      addForuAlert: false //创建论坛
    };
  },
  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    async handleSizeChange(val) {
      this.pageSize = val;
      this.loadingTable = true;
      await GetDataFun.getForuList(this.currentPage, this.pageSize).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    async handleCurrentChange(val) {
      this.currentPage = val;
      this.loadingTable = true;
      await GetDataFun.getForuList(this.currentPage, this.pageSize).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    //编辑or创建论坛
    upDataForuForm() {
      if (!this.ForuForm.type) {
        this.$message({
          message: "请选择论坛类型",
          type: "warning"
        });
        return;
      }
      if (!this.ForuForm.name) {
        this.$message({
          message: "请输入论坛名称",
          type: "warning"
        });
        return;
      }
      this.ForuForm.admissionSatreTime = this.foruTime[0];
      if (!this.ForuForm.admissionSatreTime) {
        this.$message({
          message: "请确定开始时间",
          type: "warning"
        });
        return;
      }
      this.ForuForm.admissionEndTime = this.foruTime[1];
      if (!this.ForuForm.admissionEndTime) {
        this.$message({
          message: "请确定结束时间",
          type: "warning"
        });
        return;
      }
      if (!this.ForuForm.stock) {
        this.$message({
          message: "请确定库存",
          type: "warning"
        });
        return;
      }
      let subData = {
        bbsId: null,
        activityId: this.$store.state.activityId,
        bbs_type: this.ForuForm.type,
        bbs_name: this.ForuForm.name,
        start_time: this.ForuForm.admissionSatreTime,
        end_time: this.ForuForm.admissionEndTime,
        bbs_num: this.ForuForm.stock
      };
      if (!this.isaddForu && this.ForuForm.bbsId) {
        subData.bbsId = this.ForuForm.bbsId;
      }
      this.loadingaddForuAlert = true;
      this.$http.post("/api/isv/bbs/updatebbs", subData).then(
        res => {
          this.loadingaddForuAlert = false;
          this.addForuAlert = false;
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "数据提交成功!"
            });
            this.handleCurrentChange(this.currentPage);
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingaddForuAlert = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 添加论坛
    addForu() {
      this.addForuAlert = true;
      this.isaddForu = true;
      this.foruTime = "";
      this.ForuForm.type = "";
      this.ForuForm.name = "";
      this.ForuForm.admissionSatreTime = "";
      this.ForuForm.admissionEndTime = "";
      this.ForuForm.stock = 0;
      this.ForuForm.bbsId = "";
    },
    // 编辑论坛
    editForu(scopeRow) {
      this.addForuAlert = true;
      this.isaddForu = false;
      this.ForuForm.type = scopeRow.bbsType;
      this.ForuForm.name = scopeRow.bbsName;
      this.foruTime = [scopeRow.startTime, scopeRow.endTime];
      this.ForuForm.admissionSatreTime = scopeRow.startTime;
      this.ForuForm.admissionEndTime = scopeRow.endTime;
      this.ForuForm.stock = scopeRow.bbsNum;
      this.ForuForm.bbsId = scopeRow.bbsId;
    },

    //   删除论坛
    delForu(bbsId) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            bbsId: bbsId
          };
          this.$http.post("/api/isv/bbs/delbbs", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.handleCurrentChange(this.currentPage);
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.ticketList-box {
  width: 100%;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
.cellPLeft {
  text-align: left;
  width: 100%;
}
.table_content .el-table th {
  background-color: #f9f9f9 !important;
}
</style>
